<template>
  <div class="search-list container">
    <div class="headers">
      <Header></Header>
      <ul>
        <li
          v-for="(item, index) in searchList.data"
          :key="index"
          @click="changeTab(index)"
        >
          <div :class="searchList.currentIndex == index ? 'active' : ''">
            {{ item.name }}
          </div>
          <div class="search-filter" v-if="index != 0 && index != 3">
            <i
              class="iconfont icon-xiangshang"
              :class="item.status == 1 ? 'active' : ''"
            ></i>
            <i
              class="iconfont icon-xiangxia"
              :class="item.status == 2 ? 'active' : ''"
            ></i>
          </div>
        </li>
      </ul>
    </div>

    <section ref="wrapper">
      <ul v-if="goodsList.length">
        <li v-for="(item, index) in goodsList" :key="index">
          <img v-lazy="item.imgUrl" alt="" />
          <h3>{{ item.name }}</h3>
          <div class="price">
            <div>
              <span>￥</span>
              <b>{{ item.price }}</b>
            </div>
            <div>立即购买</div>
          </div>
        </li>
      </ul>
      <div v-else>
        <van-empty image="search" description="暂无数据..." />
      </div>
    </section>
    <Tabbar></Tabbar>
  </div>
</template>

<script>
import Header from "@/components/search/Header.vue";
import Tabbar from "@/components/common/Tabbar.vue";
import http from "@/common/api/request";
import BetterScroll from "better-scroll";
export default {
  data() {
    return {
      goodsList: [],
      searchList: {
        currentIndex: 0,
        data: [
          { name: "综合", key: "zh" },
          { name: "销量", status: 0, key: "num" },
          { name: "价格", status: 0, key: "price" },
          { name: "筛选" },
        ],
      },
    };
  },
  computed: {
    orderBy() {
      let obj = this.searchList.data[this.searchList.currentIndex];
      let val = obj.status == "1" ? "asc" : "desc";
      return {
        [obj.key]: val,
      };
    },
  },
  components: {
    Tabbar,
    Header,
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      http
        .$axios({
          url: "/api/goods/shopList",
          params: {
            searchName: this.$route.query.key,
            ...this.orderBy,
          },
        })
        .then((res) => {
          this.goodsList = res;
        });
    },
    changeTab(index) {
      this.searchList.currentIndex = index;
      let item = this.searchList.data[index];
      this.searchList.data.forEach((v, i) => {
        if (i != index) {
          v.status = 0;
        }
      });
      //当前点击改变状态
      if (index == this.searchList.currentIndex) {
        item.status = item.status == 1 ? 2 : 1;
      }

      this.getData();
    },
  },
  watch: {
    $route() {
      this.getData();
    },
  },
};
</script>

<style lang="scss" scoped>
.headers ul {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0.1429rem;
  font-size: 0.4rem;
}
.headers ul li {
  display: flex;
  align-items: center;
}

.search-filter {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.search-filter i {
  font-size: 0.2857rem;
  padding: 0 0.1429rem;
}
section {
  ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    li {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
      width: 50%;
      padding: 0.2857rem;
       img {
        width: 4.8571rem;
        height: 4.8571rem;
      }
       h3 {
        width: 100%;
        font-size: 0.4rem;
        font-weight: 500;
        color: #333;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
  }
}

.price {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 0.2857rem 0;
  font-size: 0.4rem;
}
.price div:nth-child(1) span {
  font-size: 0.3429rem;
  color: #b0352f;
}
.price div:nth-child(1) b {
  font-size: 0.4571rem;
  color: #b0352f;
}
.price div:nth-child(2) {
  padding: 0.0857rem 0.1429rem;
  border-radius: 0.1143rem;
  color: #fff;
  background-color: #b0352f;
}
.active {
  color: red;
}
</style>
